<template>
  <view class="home">
    <view class="container">
      <!-- <image src="../../static/imgs/Frame 13.png" mode=""></image> -->
      <view class="title">
        <u-icon name="arrow-left" color="black" size="30" @click='goBack()'></u-icon>
        <text class="title_name">勤工俭学</text>
      </view>
    </view>

    <!--  -->
    <view class="img">
      <image src="../../static/imgs/Frame14@2x.png" mode=""></image>
    </view>

    <!--  -->
    <view class="content">
      <view class="tag">
        <image src="../../static/imgs/Slice91.png" mode=""></image>
        <view class="topimg">详细介绍</view>
      </view>
      <view class="contents">
        本次活动主要是为大学生设置的一个岗位。可以利用课余时间去丰富自己的生活，同时还可以培养能力，认识社会，增加自己的人生阅历，锻炼自己的意志，体验自立。同时也适合喜欢摄影，想要提高摄影这部分经历的一些大学生。
        <view>期待你们的加入，成为我们其中的一员！</view>
      </view>
    </view>

    <!--  -->
    <view class="connection">
      <view class="tag">
        <image src="../../static/imgs/Slice91.png" mode=""></image>
        <view>联系方式</view>
      </view>

      <view class="user">
        <view class="name">
          <text>姓名</text>
          <input type="text" v-model="name">
        </view>
        <view class="phone">
          <text>手机号</text>
          <input type="text" v-model="phone">
        </view>
      </view>
    </view>

    <view class="kefu">
      <image src="../../static/imgs/Slice 90@2x.png" mode="" @click="show=true"></image>
    </view>

    <view class="submit">
      <button>提交</button>
    </view>

    <!-- 联系客服遮罩层 -->
    <u-mask :show="show" @click="show = false">
      <view class="warp">
        <view class="rect" @tap.stop>
          <view class="rect_item">
            <view class="">旅拍客服</view>
            <text>18735240725</text>
          </view>
          <view class="rect_item1">
            <view class="">在线联系</view>
            <view class=""><button>在线联系</button></view>
          </view>
        </view>
        <view class="rect2" @tap.stop @click="show=false">取消</view>
      </view>
    </u-mask>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        show: false, // 联系客服遮罩层
        name: '', //姓名
        phone: '', //手机号
      };
    },
    methods: {
      goBack() {
        uni.navigateBack({
          delta: 1
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .home {
    width: 750rpx;
    height: 1624rpx;
    background: linear-gradient(180deg, #C8DCFE 0%, #EEF5FF 100%);
  }

  .container {
    position: relative;
    width: 750rpx;
    height: 176rpx;

    .title {
      position: absolute;
      bottom: 28rpx;
      left: 32rpx;
      font-weight: bold;
      color: #333333;

      .title_name {
        font-size: 32rpx;
        margin-left: 250rpx;
      }
    }
  }

  //
  .img {
    margin: 28rpx 32rpx 48rpx;

    >image {
      width: 718rpx;
      height: 396rpx;

    }
  }

  // 
  .content {
    position: relative;
    margin: auto 32rpx;
    padding: 88rpx 31rpx 0;
    width: 686rpx;
    height: 312rpx;
    background: #F8FCFF;
    border-radius: 20rpx 20rpx 20rpx 20rpx;

    .tag {
      position: absolute;
      top: -10rpx;
      left: 35%;

      >image {
        width: 230rpx;
        height: 68rpx;
      }

      >view {
        transform: translate(60rpx, -59rpx);
        font-size: 28rpx;
        font-family: PingFang SC-Bold, PingFang SC;
        font-weight: bold;
        color: #FFFFFF;
      }
    }


    .contents {
      // width: 604rpx;
      font-size: 24rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;

      >view {
        margin-top: 15rpx;
      }
    }
  }

  // 
  .connection {
    position: relative;
    margin: 60rpx 32rpx 28rpx;
    padding: 88rpx 48rpx 0;
    width: 686rpx;
    height: 296rpx;
    background: #F8FCFF;
    border-radius: 20rpx 20rpx 20rpx 20rpx;


    .tag {
      position: absolute;
      top: -10rpx;
      left: 35%;

      >image {
        width: 230rpx;
        height: 68rpx;
      }

      >view {
        transform: translate(60rpx, -59rpx);
        font-size: 28rpx;
        font-family: PingFang SC-Bold, PingFang SC;
        font-weight: bold;
        color: #FFFFFF;
      }
    }

    .user {

      .name,
      .phone {
        margin-bottom: 32rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;

        >text {
          font-size: 28rpx;
          font-family: PingFang SC-Bold, PingFang SC;
          font-weight: bold;
          color: #333333;
        }

        >input {
          padding-left: 10rpx;
          width: 464rpx;
          height: 56rpx;
          background: #F1F6FE;
          border-radius: 8rpx 8rpx 8rpx 8rpx;
        }
      }
    }
  }

  // 
  .kefu {
    margin: auto 32rpx;
    text-align: right;

    >image {
      width: 96rpx;
      height: 96rpx;
    }
  }

  // 
  .submit {
    margin-top: 40rpx;

    >button {

      width: 612rpx;
      height: 60rpx;
      line-height: 60rpx;
      background: linear-gradient(270deg, #307DFF 0%, #75A9FF 100%);
      border-radius: 32rpx 32rpx 32rpx 32rpx;

      font-size: 28rpx;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: bold;
      color: #FFFFFF;

      &:after {
        border: none;
      }
    }
  }

  // 
  .warp {
    padding: 1200rpx 32rpx;
    height: 100%;

    .rect {
      margin-bottom: 30rpx;
      height: 184rpx;
      background-color: #fff;
      border-radius: 20rpx 20rpx 20rpx 20rpx;

      .rect_item1,
      .rect_item {
        padding: 23rpx 48rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;

        >view {
          font-size: 28rpx;
          font-family: PingFang SC-Bold, PingFang SC;
          font-weight: bold;
          color: #000000;

          >button {
            display: inline-block;
            width: 186rpx;
            height: 60rpx;
            line-height: 60rpx;
            background: #E74341;
            border-radius: 8rpx 8rpx 8rpx 8rpx;
            font-size: 28rpx;
            font-family: PingFang SC-Bold, PingFang SC;
            font-weight: bold;
            color: #FFFFFF;
          }
        }

        >text {
          height: 28rpx;
          font-size: 28rpx;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          color: #000000;
        }


      }

      .rect_item {
        border-bottom: 1rpx solid #eee;
      }

    }

    .rect2 {
      text-align: center;
      height: 76rpx;
      line-height: 76rpx;
      background: #FFFFFF;
      border-radius: 66rpx 66rpx 66rpx 66rpx;
    }
  }
</style>